<template>
  <div class="user">
    <div class="user-image">
      <img :src="business.avatar_cdn" />
    </div>
  </div>

  <!-- 表单结构 -->
  <van-form @submit="OnSubmit">
    <!-- 昵称 -->
    <van-field
      v-model="business.nickname"
      name="nickname"
      label="昵称"
      placeholder="请输入昵称"
      :rules="[{ required: true, message: '请输入昵称' }]"
    />

    <!-- 手机号码 -->
    <van-field
      v-model="business.mobile"
      name="mobile"
      label="手机号"
      placeholder="请输入手机号"
      :rules="[
        { required: true, message: '请输入手机号码' },
        { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' },
      ]"
    />

    <!-- 邮箱 -->
    <van-field
      v-model="business.email"
      name="email"
      label="邮箱"
      placeholder="请输入邮箱"
      :rules="[
        { required: true, message: '请输入邮箱' },
        {
          pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
          message: '邮箱格式不正确',
        },
      ]"
    />

    <!-- 密码 -->
    <van-field
      v-model="business.password"
      type="password"
      name="password"
      label="密码"
      placeholder="请输入密码"
    />

    <!-- 性别 -->
    <van-field name="gender" label="性别">
      <template #input>
        <van-radio-group v-model="business.gender" direction="horizontal">
          <van-radio name="0">保密</van-radio>
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 地区 -->
    <van-field
      name="region"
      label="地区选择"
      placeholder="点击选择省市区"
      v-model="business.region_text"
      readonly
      is-link
      @click="AreaShow = true"
    />

    <!-- 弹出框组件 -->
    <van-popup v-model:show="AreaShow" round position="bottom">
      <!-- 地区组件 -->
      <van-area
        v-model="code"
        title="地区选择器"
        :area-list="areaList"
        @cancel="AreaShow = false"
        @confirm="OnAreaConfirm"
      />
    </van-popup>

    <!-- 头像上传 -->
    <van-field label="上传头像">
      <!-- 插槽重新输入框部分，用文件上传来代替 -->
      <template #input>
        <van-uploader v-model="avatar" :max-count="1" />
      </template>
    </van-field>

    <div style="width: 80%; margin: 2em auto">
      <van-button
        :loading="loading"
        round
        block
        color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)"
        native-type="submit"
        >提交</van-button
      >
    </div>
  </van-form>
</template>

<script setup>
// 引入地区数据
import { areaList } from "@vant/area-data";

// 声明proxy 这个函数是获取this的 相当于vue2里面的this指向    但自从vue3开始后  官方里面说 this使用的次数会慢慢减少
const { proxy } = getCurrentInstance();

// 获取个人资料信息
const business = proxy.$business;

// 定义loading状态
const loading = ref(false);

// 定义地区选择组件显示状态
const AreaShow = ref(false);

// 定义 地区码 信息
const code = ref(
  business.value.district
    ? business.value.district
    : business.value.city
    ? business.value.city
    : business.value.province
);

//获取头像  从fastadmin模型里面传的字段过来 显示在页面上
const avatar = ref([{ url: business.value.avatar_cdn }]);

// 表单提交
const OnSubmit = async (values) => {
    let params = {
        id:business.value.id,
        nickname:values.nickname,
        mobile:values.mobile,
        email:values.email,
        gender:values.gender
    }

    if(values.password)
    {
        params.password = values.password;
    }

    if(code.value)
    {
        params.code = code.value;
    }

    if(avatar.value[0]?.file)
    {
        params.avatar = avatar.value[0]?.file;
    }

    let result = await proxy.$http.upload({
        url:'/business/profile',
        params
    })

    if(result.code === 1)
    {
        proxy.$success({
            message:result.msg,
            onClose:() =>
            {
                proxy.$router.back();
            }
        })
    }else{
        proxy.$fail(result.msg);
    }
};

// 地区选择确认事件
const OnAreaConfirm = ({selectedOptions}) =>
{
    // 获取省市区并且分别赋值新的变量
    const [province,city,district] = selectedOptions;

    // 存放拼接好的地区
    let RegionText = '';

    let RegionCode = 0;

    if(province.value)
    {
        RegionText = province.text + '-';
        RegionCode = province.value;
    }

    if(city.value)
    {
        RegionText += city.text + '-';
        RegionCode = city.value;
    }

    if(district.value)
    {
        RegionText += district.text;
        RegionCode = district.value;
    }

    // 关闭弹出层
    AreaShow.value = false;

    business.value.region_text = RegionText;
    code.value = RegionCode;
};
</script>

<style scoped>
@import url('/assets/css/BusinessProfile.css');
</style>